<template>
  <div class="chart-cycle-list">
    <span
      class="list-item"
      :class="{ active: cycleType === ele.cycleType }"
      v-for="(ele, eleIndex) in cycleList"
      @click="eventCycleTypeChange(ele, eleIndex)"
      :key="eleIndex"
    >
      {{ ele.cycleType | cycleTypeText }}
    </span>
  </div>
</template>
<script>
export default {
  name: "chart-cycle-list",
  props: {
    cycleList: {
      type: Array,
      default: () => []
    },
    cycleType: [String, Number]
  },
  filters: {
    cycleTypeText(val) {
      let cycleTypeOption = [
        { label: "实时", cycleType: 0 },
        { label: "小时", cycleType: 1 },
        { label: "日", cycleType: 2 },
        { label: "月", cycleType: 3 },
        { label: "年", cycleType: 4 },
        { label: "时间区间", cycleType: 5 },
      ];
      let res = cycleTypeOption.find(e => e.cycleType === val);
      return (res && res.label) || "";
    }
  },
  methods: {
    eventCycleTypeChange(ele, index) {
      this.$emit("onCycleChange", ele, index);
    }
  }
};
</script>
<style lang=""></style>
